<template>
  <div class="container">
    <div class="one">告警信息</div>
    <div class="three">
      <div ref="body" class="body">
        <div class="son" v-for="(item, index) in dataList" :key="index">
          <marquee>{{ item.content }} </marquee>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import marquee from '../marquee.vue'
import { mapState } from 'vuex'
import { fontSize } from '../../utils/tools'
export default {
  name: 'threeBottomRight',
  components: {
    marquee
  },
  data () {
    return {
      count: '',
      index: 1,
      t: '',
      dataList: []
    }
  },
  watch: {
    initData: {
      deep: true,
      handler (val) {
        // console.log('最后一个的数据检测到改变了')
        this.dataList = this.initData.warningMessage
      }
    }
  },
  created () {
    this.dataList = this.initData.warningMessage
  },
  mounted () {
    let m = this.dataList.length
    console.log(m)
    if (m > 7) {
      this.count = m - 7
      this.t = setInterval(() => {
        if (this.count > 0) {
          // let min = this.index * -100
          let min = this.index * -fontSize(100)
          this.$refs.body.style.top = `${min}px`
          this.index++
          this.count--
        } else {
          this.$refs.body.style.top = '0px'
          this.count = m - 7
          this.index = 1
        }
      }, 2000)
    }
    // console.log(this.$refs.body.style)
  },
  destroyed () {
    clearInterval(this.t)
  },
  computed: {
    ...mapState(['initData'])
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url('../../assets/image/thin.png') no-repeat 0px 0px;
  background-size: 100% 100%;
  // background-color: rgb(132, 193, 218, 0.1);
  .one {
    width: 750px;
    height: 110px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15%;
    font-size: 35px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #66e2e2;
    background: url('../../assets/image/thinTipbg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .three {
    height: 700px;
    // border: 1px solid #000;
    // width: 100%;
    margin-top: 25px;
    margin-right: 45px;
    margin-left: 45px;
    margin-bottom: 30px;
    font-size: 18px;
    color: white;
    overflow: hidden;
    .body {
      position: relative;
    }
    .son {
      padding-left: 4%;
      padding-right: 4%;
      // border: 2px solid red;
      width: 600px;
      height: 90px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      background: linear-gradient(
        90deg,
        rgba(10, 91, 150, 0) 0%,
        rgba(5, 42, 83, 0.82) 50%,
        rgba(4, 46, 93, 0) 100%
      );
    }
  }
}
</style>
